<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title>人员</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
<div th:replace="header :: nav"></div>

<link rel="stylesheet" th:href="@{/static/css/dataTables.bootstrap.css}">
<link th:href="@{/static/css/jquery.dataTables.min.css}" rel="stylesheet" media="screen">

<script th:src="@{/static/js/jquery.dataTables.min.js}"></script>
<script th:src="@{/static/js/dataTables.bootstrap.min.js}"></script>

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
                <thead>
                <tr>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年级</th>
                    <th>isSingle</th>
                    <th>部门</th>
                    <th>注册时间</th>
                </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>

<!-- Button trigger modal -->
<button id="triggerModal" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" style="display: none">
    Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-divledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-div="Close"><span aria-hidden="true">&times;</span></button>
                <h2 class="modal-title" id="realName">Modal title</h2>
            </div>
            <div class="modal-body" style="font-size:18px;">
                <!--<div class="row"><div class="col-xs-4">姓名:</div><div id="realName" class="col-md-9">test</div></div>-->
                <div class="row"><div class="col-xs-4">性别:&nbsp;&nbsp;&nbsp;</div><div id="sex" class="col-xs-4">test</div></div>
                <div class="row"><div class="col-xs-4">年级:&nbsp;&nbsp;&nbsp;</div><div id="grade" class="col-xs-4">test</div></div>
                <div class="row"><div class="col-xs-4">专业:&nbsp;&nbsp;&nbsp;</div><div id="major" class="col-xs-4">test</div></div>
                <div class="row"><div class="col-xs-4">github:&nbsp;&nbsp;&nbsp;</div><div id="github" class="col-xs-4">test</div></div>
                <div class="row"><div class="col-xs-4">电话:&nbsp;&nbsp;&nbsp;</div><div id="phone" class="col-xs-4">test</div></div>
                <div class="row"><div class="col-xs-4">微信:&nbsp;&nbsp;&nbsp;</div><div id="wechat" class="col-xs-4">test</div></div>
                <div class="row"><div class="col-xs-4">QQ:&nbsp;&nbsp;&nbsp;</div><div id="qq" class="col-xs-4">test</div></div>
                <div class="row"><div class="col-xs-4">所住校区:&nbsp;&nbsp;&nbsp;</div><div id="area" class="col-xs-4">test</div></div>
                <div class="row"><div class="col-xs-4">部门:&nbsp;&nbsp;&nbsp;</div><div id="department" class="col-xs-4">test</div></div>
                <div class="row"><div class="col-xs-4">isSingle:&nbsp;&nbsp;&nbsp;</div><div id="isSingle" class="col-xs-4">test</div></div>
                <div class="row"><div class="col-xs-4">注册时间:&nbsp;&nbsp;&nbsp;</div><div id="inTime" class="col-xs-4">test</div></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
<script>
    function showOneStaff(username) {
        $.ajax({
            url:"/staff/"+username,
            dataType:"json",
            success:function (data) {
                $("#realName").html(data.realName);
                $("#sex").text(data.sex);
                $("#grade").text(data.grade);
                $("#major").text(data.major);
                $("#github").text(data.github);
                $("#phone").text(data.phone);
                $("#wechat").text(data.wechat);
                $("#qq").text(data.qq);
                $("#area").text(data.area);
                $("#department").text(data.department);
                if(data.isSingle==1)
                    $("#isSingle").text('是');
                else if(data.isSingle==0)
                    $("#isSingle").text('否');
                else
                    $("#isSingle").text('maybe');
                $("#inTime").text(data.inTime);
                $("#triggerModal").click();
            }
        });
    }
    function setStaffData(res, callback) {
        var returnDate = {};
        returnDate.draw = res.draw;
        //$('#example').DataTable().page(res.page);
        returnDate.recordsTotal = res.totalElements;
        returnDate.recordsFiltered = res.totalElements;
        returnDate.data = res.content;
        callback(returnDate);
    }

    //排序映射函数
    function map(index){
        var mapArray=['realName','sex','grade','isSingle','department','inTime'];
        return mapArray[index];
    }

    $(document).ready(function () {
        var table = $('#example').DataTable({
            searching: true,
            processing: true,
            serverSide: true,
            renderer: "bootstrap",
            ajax: function (data, callback, settings) {
                var table=$('#example').DataTable();
                console.log(data)
                var page =table.page.info().page;
                var length=table.page.len();
                var order=table.order();
                var keyword = table.search();
                $.ajax({
                    type: 'GET',
                    url: '/staff',
                    contentType: 'json',
                    dataType: "json",
                    data:{"page":page,"size":length,"keyword":keyword,"sort":map(order[0][0])+','+order[0][1]},
                    success: function (res) {
                        setStaffData(res, callback);
                    }
                });
            },
            columns: [
                {"data": "realName"},
                {"data": "sex"},
                {"data": "grade"},
                {"data": "isSingle", 'render':function(data,type,full,meta){
                    if(data==2)
                            return 'maybe';
                    else if(data==1)
                            return '是';
                    else
                            return '否';
                }},
                {"data": "department"},
                {"data": "inTime"}
            ],
            "language": {
                "sProcessing": "处理中...",
                "sLengthMenu": "显示 _MENU_ 项结果",
                "sZeroRecords": "没有匹配结果",
                "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                "sInfoPostFix": "",
                "sSearch": "搜索:",
                "sUrl": "",
                "sEmptyTable": "未搜索到数据",
                "sLoadingRecords": "载入中...",
                "sInfoThousands": ",",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "上页",
                    "sNext": "下页",
                    "sLast": "末页"
                },
                "oAria": {
                    "sSortAscending": ": 以升序排列此列",
                    "sSortDescending": ": 以降序排列此列"
                }
            },
            fnRowCallback: function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
                nRow.setAttribute("username",aData.username);
                return nRow;
            }
        });

        table.on('click','td',function(){
            console.log(this);//获取到了被单击的td
            var tr=this.parentNode;//td的父元素就是tr的情况下
            var username = tr.getAttribute("username");
            showOneStaff(username)
        })
    });
</script>
</body>

</html>